$borderColor: #e5e5e5;
.ui-border-t {
    border-top: 1px solid $borderColor
}

.ui-border-b {
    border-bottom: 1px solid $borderColor
}

.ui-border-tb {
    border-top: $borderColor 1px solid;
    border-bottom: $borderColor 1px solid;
    background-image: none
}

.ui-border-l {
    border-left: 1px solid $borderColor
}

.ui-border-r {
    border-right: 1px solid $borderColor
}

.ui-border {
    border: 1px solid $borderColor;
}

.ui-border-radius {
    border: 1px solid $borderColor;
    border-radius: 4px
}

.ui-border-m-tb {
    background-image: -webkit-linear-gradient(top, #d9d9d9, #d9d9d9 50%, transparent 0);
    background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 0);
    background-size: 120% 1px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-origin: content-box;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-border-radius {
        position: relative;
        border: 0
    }
    .ui-border-radius:before {
        content: "";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid $borderColor;
        transform: scale(0.5);
        transform-origin: 0 0;
        padding: 1px;
        border-radius: 8px;
        pointer-events: none
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-border {
        position: relative;
        border: 0
    }
    .ui-border-t,
    .ui-border-b,
    .ui-border-l,
    .ui-border-r,
    .ui-border-tb {
        border: 0
    }
    .ui-border-t {
        background-position: left top;
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, $borderColor), to($borderColor))
    }
    .ui-border-b {
        background-position: left bottom;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, $borderColor), to($borderColor))
    }
    .ui-border-t,
    .ui-border-b,
    .ui-border-tb {
        background-repeat: repeat-x;
        background-size: 100% 1px;
    }
    .ui-border-tb {
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, $borderColor), to($borderColor)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, $borderColor), to($borderColor));
        background-position: top, bottom
    }
    .ui-border-l {
        background-position: left top;
        background-image: -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, $borderColor), to($borderColor))
    }
    .ui-border-r {
        background-position: right top;
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, $borderColor), to($borderColor))
    }
    .ui-border-l,
    .ui-border-r {
        background-repeat: repeat-y;
        background-size: 1px 100%;
    }
    .ui-border:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, $borderColor), to($borderColor)), -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, $borderColor), to($borderColor)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, $borderColor), to($borderColor)), -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, $borderColor), to($borderColor));
        background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
        background-repeat: no-repeat;
        background-position: top, right, bottom, left;
        pointer-events: none;
        padding: 1px;
        z-index: 10;
    }
}
